<template>
    <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
	name: 'serviceRequests',
	data() {
		return {
			dom: null,
		}
	},
	methods: {
		resize() {
			this.dom.resize()
		},
	},
	mounted() {
		const option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
						backgroundColor: '#6a7985',
					},
				},
			},
			grid: {
				top: '3%',
				left: '1.2%',
				right: '1%',
				bottom: '3%',
				containLabel: true,
			},
			xAxis: [
				{
					type: 'category',
					boundaryGap: false,
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				},
			],
			yAxis: [
				{
					type: 'value',
				},
			],
			series: [
				{
					name: '运营商/网络服务',
					type: 'line',
					stack: '总量',
					areaStyle: {
						normal: {
							color: '#2d8cf0',
						},
					},
					data: [120, 132, 101, 134, 90, 230, 210],
				},
				{
					name: '银行/证券',
					type: 'line',
					stack: '总量',
					areaStyle: {
						normal: {
							color: '#10A6FF',
						},
					},
					data: [257, 358, 278, 234, 290, 330, 310],
				},
				{
					name: '游戏/视频',
					type: 'line',
					stack: '总量',
					areaStyle: {
						normal: {
							color: '#0C17A6',
						},
					},
					data: [379, 268, 354, 269, 310, 478, 358],
				},
				{
					name: '餐饮/外卖',
					type: 'line',
					stack: '总量',
					areaStyle: {
						normal: {
							color: '#4608A6',
						},
					},
					data: [320, 332, 301, 334, 390, 330, 320],
				},
				{
					name: '快递/电商',
					type: 'line',
					stack: '总量',
					label: {
						normal: {
							show: true,
							position: 'top',
						},
					},
					areaStyle: {
						normal: {
							color: '#398DBF',
						},
					},
					data: [820, 645, 546, 745, 872, 624, 258],
				},
			],
		}
		this.$nextTick(() => {
			this.dom = echarts.init(this.$refs.dom)
			this.dom.setOption(option)
			on(window, 'resize', this.resize())
		})
	},
	beforeDestroy() {
		off(window, 'resize', this.resize())
	},
}
</script>
